<template>
<div>
    <Row type="flex" style="margin-bottom: 10px"  justify="start">
        <Button icon="md-add"  type="primary" @click="menuModal=true">添加</Button>
    </Row>
    <Row type="flex" justify="center" >
        <Table row-key="menuId" :loading="loading" border @on-sort-change="sortchange" :columns="menuColumns" :data="listMenu">
            <template slot-scope="{ row }" slot="action">
                <Button icon="md-build"  type="primary" size="small" @click="updateMenu(row)" style="margin-right: 5px">修改</Button>
                <Button icon="md-trash"  type="error" @click="removeMenu(row.menuId)" size="small" >刪除</Button>
            </template>
        </Table>
        <Page style="margin-top:10px " :total="100" show-elevator />
    </Row>
    <Myaddmodal :mychange="menuModal" @changerstatus = "changerstatus"></Myaddmodal>
    <Myupdatemodal :menuUpdate="menuUpdate" ></Myupdatemodal>
</div>
</template>

<script>
 import Myaddmodal from "@c/sys/menu/addMenuModal";
 import Myupdatemodal from "@c/sys/menu/updateMenuModal"
  export default {
      data(){
          return{
              loading:true,
              menuColumns:[
                  {type: 'index',title: "序号", width: 70, align: 'center' },
                  {title:"菜单名称",key:"menuName",tree: true,sortable: true},
                  {title:"菜单图标",width: 100,align:'center', key:"menuIcon",render:(h,params)=>{return <Icon size="26" type={params.row.menuIcon} />}},
                  {title:"菜单级别",
                      key:"menuLevel",
                      sortable: true,
                      width: 120,
                      align:'center',
                      render:(h,params)=>{
                          if(params.row.menuLevel==='1'){ return <Tag color="success">1级标题</Tag>}
                          if(params.row.menuLevel==='2'){ return <Tag color="primary">2级标题</Tag>}
                          if(params.row.menuLevel==='3'){ return <Tag color="red">3级标题</Tag>}
                      }
                  },
                  {title:"路由路径",key:"routerPath",sortable: true},
                  {title:"页面路径",key:"routerUrl",sortable: true},
                  {title:"菜单序号",key:"mark",sortable: true},
                  {title:"菜单父序号",key:"fatherMark",sortable: true},
                  {
                      title: '操作',
                      slot: 'action',
                      width: 200,
                      align: 'center'
                  }
              ],
              listMenu:[],
              menuModal:false,
              changedata:{  //用于获取表格数据的时候进行的条件筛选
                  sort:"1",
                  page:"1",
                  size:"1"
              },
              menuUpdate:{ //用户点击更新按钮的时候进行跳转的时候的传递的参数
                  menudo:{},
                  menuFlag:false
              }
          }
      },
      methods:{
          /**
           * 菜单更新
           * @param menuId 菜单id
           */
          updateMenu(row){
             this.menuUpdate.menuFlag = true
              this.menuUpdate.menudo = row
          },
          /**
           * 排序方法
           * @param val
           */
          sortchange(val){

          },
          /**
           * 获取表格数据
           */
          getAllMenu(){
              this.http.get("/menu/getAllMenu",this.qs.parse(this.changedata)).then(res=>{
                  if(res.data){
                      this.menuDatachangeTree(res.data.list)
                  }
              }).finally(res=>{
                  this.loading = false
              })
          },
          /**
           *将菜单排序成树形数据
           */
          menuDatachangeTree(list){
              this.listMenu = []
              list.forEach(one=>{
                  if(one.menuLevel==1){
                      let onedata={}
                      onedata.menuId = one.menuId
                      onedata.menuLevel = one.menuLevel
                      onedata.menuName = one.menuName
                      onedata.menuIcon = one.menuIcon
                      onedata.routerPath = one.routerPath
                      onedata.routerUrl = one.routerUrl
                      onedata.mark = one.mark
                      onedata.fatherMark = one.fatherMark
                      onedata.children = []
                      list.forEach(tow=>{
                          if(tow.fatherMark == one.mark) {
                              let towdata = {}
                              towdata.menuId = tow.menuId
                              towdata.menuLevel = tow.menuLevel
                              towdata.menuName = tow.menuName
                              towdata.menuIcon = tow.menuIcon
                              towdata.routerPath = tow.routerPath
                              towdata.routerUrl = tow.routerUrl
                              towdata.mark = tow.mark
                              towdata.fatherMark = tow.fatherMark
                              towdata.children = []
                              onedata.children.push(towdata)
                              list.forEach(three=>{
                                  if(three.fatherMark == tow.mark ) {
                                      let threedata = {}
                                      threedata.menuId = three.menuId
                                      threedata.menuLevel = three.menuLevel
                                      threedata.menuName = three.menuName
                                      threedata.menuIcon = three.menuIcon
                                      threedata.routerPath = three.routerPath
                                      threedata.routerUrl = three.routerUrl
                                      threedata.mark = three.mark
                                      threedata.fatherMark = three.fatherMark
                                      towdata.children.push(threedata)
                                  }
                             })
                          }
                      })
                      this.listMenu.push(onedata)
                  }
              })
          },
          /**
           * 添加的模态框反穿回来的值
           * @param val
           */
          changerstatus(val){
              this.menuModal = val
          },
          /**
           * 更新的模态框反穿回来的值
           * @param val
           */
          updatechangerstatus(val){
              this.menuUpdate.menuFlag = false
          },
          /**
           * 执行删除表格数据（单行）
           * @param menuId
           */
          removeMenu(menuId){
              let that = this
              this.$Modal.confirm({
                  title:"警告",
                  content:"是否要删除该条信息！！！",
                  onOk(){
                     this.http.post("/menu/removeMenu",this.qs.stringify({'menuId':menuId})).then(res=>{
                         if(res.data){
                             that.getAllMenu()
                             that.$Message.success("删除成功！！")
                         }else {
                             that.$Message.error("出错啦！！")
                         }
                     })
                  },
                  onCancel(){
                      that.$Message.info("取消了删除！！")
                  }
              })
          }
      },
      created() {
          this.getAllMenu()
      },
      components:{
          Myaddmodal,
          Myupdatemodal,
      },

  }
</script>
<style scoped>

</style>
